<template>
	<view>
		<view class="boxes">
			<view class="title">延期原因:</view>
			<view style="width:75%;">
				<xfl-select :list="list" :showItemNum="5" :isCanInput="false" :style_Container="listBoxStyle" :placeholder="'请选择'" @change="change"></xfl-select>
			</view>
		</view>
		<view class="boxes" @tap="toggleTab()">
			<view class="title">延期日期</view>
			<view class="uni-btn result">
				<view>{{ resultInfo.result }}</view>
				<image class="uni-img-icon" src="../../static/imgs/a.png" mode=""></image>
			</view>
		</view>
		<w-picker
			mode="dateTime"
			startYear="2019"
			endYear="3030"
			step="1"
			:defaultVal="defaultVal"
			:current="false"
			@confirm="onConfirm"
			ref="dateTime"
			themeColor="#f00"
		></w-picker>

		<view class="boxes">
			<view class="title">备注:</view>
			<textarea maxlength="-1" v-model="remark" placeholder="请输入" />
		</view>

		<view class="btn" @click="sure()">确定</view>
	</view>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue';
export default {
	components: {
		wPicker
	},
	data() {
		return {
			// 延期时间
			startYear: new Date().getFullYear(),
			defaultVal: [0, 0, 0, 0, 0, 0],
			mode: 'dateTime',
			name: '日期时间选择',
			tabIndex: 0,
			resultInfo: {
				result: '请选择'
			},

			// 延期原因
			listBoxStyle: `height: 30px; font-size: 28upx;`,
			list: [],
			codeName: '',

			// 订单id
			orderID: '',

			remark: ''
		};
	},
	computed: {},
	onLoad(e) {
		this.orderID = e.id;
		this.my_type();
	},
	onShow() {
		this.getNowFormatDate()
	},
	methods: {
		// 当前时间
		getNowFormatDate() {
			var date = new Date();
			var seperator1 = '-';
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var hour = date.getHours();
			var minutes = date.getMinutes();
			var seconds = date.getSeconds();
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = '0' + strDate;
			}
			var currentdate = year + seperator1 + month + seperator1 + strDate + '  ' + hour + ':' + minutes + ':' + seconds;
			year = year.toString()
			year = year.substr(year.length-1,1)
			this.defaultVal = [parseInt(year)+1,month-1,strDate-1,hour,minutes,seconds]
		},
		// 延迟原因
		my_type() {
			var that = this;
			uni.request({
				url: '/app/wechatApi/getOrderProcess',
				method: 'POST',
				data: {
					code: 'delayReason'
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code == 200) {
						console.log(res);
						for (var i = 0; i < res.data.data.length; i++) {
							that.list.push(res.data.data[i].name);
						}
					} else {
						uni.showToast({
							title: '网络出错...',
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},
		change({ newVal, oldVal, index, orignItem }) {
			// console.log(newVal, index);
			this.codeName = newVal;
			console.log(this.codeName, '延期原因');
		},

		// 延期时间
		toggleTab() {
			this.$refs['dateTime'].show();
		},
		onConfirm(val) {
			// console.log(val);
			this.resultInfo = val;
			console.log(this.resultInfo.result, '延期时间');
		},

		sure() {
			if (!this.codeName) {
				uni.showToast({
					title: '请选择延迟原因!',
					icon: 'none'
				});
				return;
			}
			if (this.resultInfo.result == '请选择') {
				uni.showToast({
					title: '请选择延迟时间!',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				mask: false
			});
			uni.request({
				url: '/app/wechatApi/wechatOrder/receiptOrder',
				method: 'POST',
				data: {
					openid: uni.getStorageSync('openid'),
					orderId: this.orderID,
					receiptKey: 'delay',
					delayReason: this.codeName,
					delayTime: this.resultInfo.result,
					disposeRemark: this.remark
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					// console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: '操作成功!',
							icon: 'none'
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							});
						}, 1000);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background: #ffffff;
}
.boxes {
	display: flex;
	align-items: center;
	padding: 20upx 35upx;

	.title {
		font-size: 32upx;
		color: #333333;
		opacity: 0.9;
		font-weight: 500;
		width: 150upx;
	}
	.result {
		border: 1px solid #E0E0E0;
		font-size: 28upx;
		padding: 10upx 20upx;
		border-radius: 10upx;
		width: 75%;
		box-sizing: border-box;
		opacity: 0.7;
	}

	textarea {
		padding: 15upx;
		font-size: 26upx;
		width: 75%;
		line-height: 150%;
		height: 200upx;
		border: 1px solid #E0E0E0;
		border-radius: 15upx;
		box-sizing: border-box;
	}
}

/* 按钮 */
.btn {
	color: #ffffff;
	text-align: center;
	background: #48e6e7;
	margin: 200upx 50upx 0 50upx;
	padding: 10upx 0;
	border-radius: 10upx;
}
</style>
